flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/shapecraft.
flo-bit.dev/shapecraft/
1<script lang="ts">
2 import { page } from '$app/state';
3 import { toThreeMesh } from 'shapecraft/three';
4 import { getGenerator } from '$lib/registry';
5 import { buildOptions, displayValue, randomizeSeed } from '$lib/editor.svelte';
6 import { exportGLB } from '$lib/export-glb';
7 import TopBar from '$lib/components/TopBar.svelte';
8 import Rail from '$lib/components/Rail.svelte';
9 import TypeList from '$lib/components/TypeList.svelte';
10 import Viewport from '$lib/components/Viewport.svelte';
11 import ParamPanel from '$lib/components/ParamPanel.svelte';
12
13 const entry = $derived(getGenerator(page.params.id!)!);
14
15 const result = $derived.by(() => {
16 try {
17 return { model: toThreeMesh(entry.gen(buildOptions(entry))), error: null };
18 } catch (e) {
19 return { model: null, error: e instanceof Error ? e.message : String(e) };
20 }
21 });
22 const model = $derived(result.model);
23 const tris = $derived(
24 model ? (model.geometry.index?.count ?? model.geometry.getAttribute('position').count) / 3 : 0
25 );
26 const seed = $derived(displayValue(entry, 'seed') as number | undefined);
27
28 function dice() {
29 randomizeSeed(entry);
30 }
31 function doExport() {
32 if (model) exportGLB(model, `${entry.id}-seed-${seed ?? 0}`);
33 }
34</script>
35
36<svelte:head>
37 <title>{entry.label} · shapecraft</title>
38</svelte:head>
39
40<div class="flex h-dvh flex-col">
41 <TopBar {entry} ondice={dice} onexport={doExport} />
42 <div class="flex min-h-0 flex-1">
43 <Rail active={entry.category} />
44 <TypeList {entry} />
45 <Viewport {model} {entry} {seed} {tris} error={result.error} />
46 <ParamPanel {entry} />
47 </div>
48</div>